<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- TODO(tec27): pull this out into a common CSS file -->
    <style type="text/css">
      * {
        margin: 0;
        font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        box-sizing: border-box;
        font-size: 14px;
      }
      img {
        max-width: 100%;
      }
      body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        width: 100% !important;
        height: 100%;
        line-height: 1.5em;
      }
      table td {
        vertical-align: top;
      }
      body {
        background-color: #f5f5f5;
      }
      .body-wrap {
        background-color: #f5f5f5;
        width: 100%;
      }
      .container {
        display: block !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        clear: both !important;
      }
      .content {
        max-width: 600px;
        margin: 0 auto;
        display: block;
        padding: 16px;
      }
      .main {
        background-color: #fafafa;
        border: 1px solid #e0e0e0;
        border-radius: 2px;
      }
      .content-wrap {
        padding: 16px;
      }
      .content-block {
        padding: 0 0 8px;
      }
      .header {
        width: 100%;
        margin-bottom: 20px;
      }
      .footer {
        width: 100%;
        clear: both;
        color: #9e9e9e;
        padding: 16px;
      }
      .footer p,
      .footer a,
      .footer td {
        color: #9e9e9e;
        font-size: 12px;
      }
      h1,
      h2,
      h3 {
        font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #212121;
        margin: 8px 0 16px;
        line-height: 1.2em;
        font-weight: 400;
      }
      h1 {
        font-size: 34px;
      }
      h2 {
        font-size: 24px;
      }
      h3 {
        font-size: 20px;
        font-weight: 500;
      }
      h4 {
        font-size: 16px;
      }
      h5 {
        font-size: 14px;
        font-weight: 500px;
      }
      p,
      ul,
      ol {
        margin-bottom: 16px;
        font-weight: normal;
      }
      p li,
      ul li,
      ol li {
        margin-left: 4px;
        list-style-position: inside;
      }
      a {
        color: #1e88e5;
        text-decoration: underline;
      }
      .btn-primary {
        text-decoration: none;
        color: #fff;
        background-color: #1e88e5;
        border: solid #1e88e5;
        border-width: 6px 16px;
        line-height: 2em;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        border-radius: 2px;
        text-transform: uppercase;
      }
      .last {
        margin-bottom: 0;
      }
      .first {
        margin-top: 0;
      }
      .aligncenter {
        text-align: center;
      }
      .alignright {
        text-align: right;
      }
      .alignleft {
        text-align: left;
      }
      .clear {
        clear: both;
      }
      @media only screen and (max-width: 640px) {
        body {
          padding: 0 !important;
        }
        .container {
          padding: 0 !important;
          width: 100% !important;
        }
        .content {
          padding: 0 !important;
        }
      }
    </style>
  </head>
  <body>
    <table class="body-wrap">
      <tr>
        <td></td>
        <td class="container" width="600">
          <div class="content">
            <table class="main" width="100%" cellpadding="0" cellspacing="0">
              <tr>
                <td class="content-wrap">
                  <table width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                      <td class="content-block">
                        <h1>ShieldBattery Email Verification</h1>
                        <p>Thank you for signing up to ShieldBattery!</p>
                        <p>
                          Please confirm your email address by clicking the link below. We may need
                          to send you critical information about our service and it is important
                          that we have an accurate email address.
                        </p>
                        <p>
                          <a
                            href="{{{HOST}}}/verify-email?token={{token}}&userId={{userId}}&username={{username}}"
                            class="btn-primary"
                            >Verify email</a
                          >
                        </p>
                      </td>
                    </tr>
                    <tr>
                      <td class="content-block">
                        <p>gl hf gogogo</p>
                        <p></p>
                        <p>&mdash; The ShieldBattery team</p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div>
        </td>
        <td></td>
      </tr>
    </table>
  </body>
</html>
